*{
    /*清除元素自带的边框和边距属性*/
    margin: 0;
    padding: 0;
    border: 0;
}
.banner{
    /*设置最高一级父元素的长和宽，并设置内部元素居中显示*/
    width: 1190px;
    height:300px;
    margin:50px auto;
 }
.banner .banner_left{
    /*将整个父级元素分成左右两部分，单独设置左边部分*/
    /*设置左边部分的宽度是248px，长度是100%也就是最高父级的宽度*/
    width:248px;
    height: 100%;
    /*设置元素的重复渐变填充，120deg表示角度，后面的元素表示渐变的颜色和渐变的开始位置*/
    background-image: repeating-linear-gradient(120deg,#751e0b 1%,#8c3524 2%);
    /*内部填充的宽度*/
    padding: 30px;
    /*设置左对齐和相对定位，相对于body元素定位，后面的元素就相对于它定位*/
    float:left;
    position:relative;
}
.banner .banner_left .icon{
    /*设置图片的形状*/
    /*宽度和高度相同，并设置50%的圆角表示将盒子模型变成正圆，并添加了一个白色的边框*/
    width: 125px;
    height: 125px;
    border: 4px solid #FFF;
    border-radius: 50%;
    /*设置背景图片*/
    background-image: url("../img/head.jpg");
    /*使超出盒子模型的部分图片消失*/
    overflow: hidden;
    /*设置内部的图片居中显示*/
    margin:0 auto;
    /*设置背景阴影*/
    box-shadow: #000 0 1px 3px 1px;
}
.author{
    /*这里是文字的样式设置*/
    color:#FBFBFB;
    font-family: "微软雅黑", serif;
    font-size: 18px;
    line-height: 3em;
    text-align: center;
    /*关于文字的阴影设置，和盒子的阴影设置相比，文字的阴影没有扩展，并且文字的标签名字为：text-shadow*/
    text-shadow: #333 1px 2px 3px;
}
.info{
    /*接下来就是设置另一个文字的样式*/
    color:#FBFBFB;
    font-family: "微软雅黑",serif;
    font-size: 18px;
    line-height: 1.5em;
    text-align: center;
    /*这里是设置文字的斜体样式*/
    font-style: italic;
    /*这里是设置文字的阴影背景*/
    text-shadow: #333 1px 2px 3px;
}
.banner_left:after{
    /*这个元素是用来制作小三角形用的*/
    content:'';
    position: absolute;
    top: 20%;
    right: -20px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #751e0b;
    z-index: 1000;
}
.banner_right{
    /*这边是用来设置右边的内容的样式*/
    height: 100%;
    width: 822px;
    padding: 30px;
    background-image: url("../img/fengjing.jpg");
    float: left;
    position:relative;
}
.bottom{
    position:absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    color:white;
    /*-webkit-表示浏览器的内核，因为不同的浏览器对于阴影的支持是不一样的，前缀加一个内核表示该内核的浏览器都能使用*/
    /*rgba的a表示不透明度，从0~1开始，0是全透明，1是不透明，设置阴影的不透明度*/
    background-image: -webkit-repeating-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));
}
.banner_right p{
    padding: 12px 0 0 30px;
    font-size: 1.5em;
    font-family: "方正姚体",serif;
    font-weight: bold;
}
